<template>
  <div class="login_box">

    <div class="box-card">
      <span class="sys-name">智慧停车系统</span>

      <el-form :model="adminData" label-width="80px" class="form_box">
        <el-form-item label="账号：" prop="account" style="--el-text-color-regular: white;" :rules="[
          {
            required: true,
            message: '请输入账号',
            trigger: 'blur',
          },
        ]">
          <el-input type=" text" autocomplete="off" v-model="adminData.account" style="--el-input-text-color:#000" />
        </el-form-item>
        <el-form-item label="密码：" prop="password" style="--el-text-color-regular: white;" :rules="[
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur',
          },
        ]">
          <el-input type="password" autocomplete="off" v-model="adminData.password" style="--el-input-text-color:#000"
            @keyup.enter="login" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>




  </div>
</template>

<script setup lang="ts">
import { getLoginAPI } from '../../api/login';
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
const router = useRouter();
const store = useStore();
const loginState = ref(false);
let adminData = reactive({
  account: '',
  password: '',
});

function login() {
  getLoginAPI({
    ...adminData
  }).then((res: any) => {
    // console.log(res);

    if (res.code == 2000) {
      loginState.value = true;
      localStorage.setItem('token', res.data.token);
      localStorage.setItem('accountid', res.data.id);
      localStorage.setItem('account', res.data.account);
      localStorage.setItem('role', res.data.role);
      localStorage.setItem('adminName', res.data.name);
      store.commit('CHANGE_LOGINSTATE', loginState);
      router.push('/');
    } else {
      ElMessage({
        message: res.msg,
      })
    }
  })
}


</script>

<style lang="less" scoped>
.login_box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url(../../assets/img/bg.png) no-repeat 0 0/100% 100%;

  .box-card {
    width: 500px;
    margin: 300px auto;
    padding: 40px;
    // background-color: #965656;

    .sys-name {
      font-weight: bold;
      font-size: 40px;
      width: 100%;
      text-align: center;
      display: block;
      color: #fff;
      margin-bottom: 20px;
      margin-left: 30px;
    }

    .el-button {
      width: 80px;
      margin-left: 120px;
    }
  }
}
</style>